<script type="text/javascript" src="<?php echo "libs/json/json2.js"; ?>"></script>
<?php $menu_height = 30; ?>
<style type="text/css">
.menu {
  cursor: pointer;
  border-bottom: 0;
  line-height: 40px;
  padding-right: 20px;
}
.menu a {
  color: #fff;
  text-decoration: none;
}
.menu:hover {
  background-color: #fff;
  border-bottom: 1px solid #ff0000;
}
.menu:hover a {
  color: #000;
}
.hi {
  background-color: #fff !important;
  border-bottom: 0;
}
.hi a {
  color: #825050 !important;
}
ul li {
  float: left;
}
li {
  list-style-image: none;
  list-style-type: none;
}
.menu img {
  float: left;
  height: 25px;
  margin-left: 14px !important;
  margin-top: 8px;
  margin-right: 4px;
  width: 25px;
  display: block;
}
.ctrl {
  cursor: pointer;
  border-bottom: 0;
  line-height: 49px;
  padding: 0 5px;
  color: #ddd;
}
.ctrl a {
  color: #ddd;
  font-family: Lucida Sans Unicode;
}
.sub_menu {
}

.sub_div {
  height: <?php echo $menu_height; ?>px;
  line-height: <?php echo $menu_height - 5; ?>px;
  font-family: Trebuchet MS;
  font-size: 13px;
  font-weight: bold;
  text-align: left;
  vertical-align: middle;
  cursor: pointer;
  background-color: #222;
  color: #fff;
  border-bottom: 1px solid #aaa;
  min-width: 70px;
  padding: 5px 10px 5px 15px;
}
.sub_div td {
  color: #fff;
}
.sub_div:hover {
  background-color: #eee;
  color: #000;
  border-bottom: 1px solid #222;
}
.sub_div:hover td {
  color: #000;
}
</style>

<?php 
$id = MiscUtils::getParam('i', $pages[0]->id);
$mRoot = new stdClass();
$mRoot->id = 0;
$mRoot->name = 'ROOT';
$mRoot->link = '';
_createMenuRoot($pages, $mRoot);

$first_id = 0;
$nav = _getNav($mRoot, $page_id);
if (count($nav) > 0) {
  $first_id = $nav[0]->id;
}
?>

<?php if (isset($_SESSION['admin' . USER]) && $_SESSION['admin' . USER]->id) { ?>
<ul style="padding: 0;">
<?php
  foreach ($mRoot->c as $idx => &$m) {
    echo "<li onmouseover=\"showMore('$m->id', this);\" class=\"menu m$idx" . (($first_id == $m->id) ? 'h hi' : '') . "\"><a " . ((count($m->c) == 0) ? "href=\"?i=$m->id\"" : "href=\"#\"") . ">" . (($m->path != '') ? "<img src=\"$m->path\"></img>" : "") . "$m->name</a></li>";
  }
?>
<li style="float: right;">
  <ul style="padding: 0;">
    <li class="ctrl"><a href="?i=<?php echo ADMIN_ACCOUNT_ID; ?>">Store Profile</a></li>
    <li class="ctrl">|</li>
    <li class="ctrl"><a href="?i=<?php echo $page_id; ?>&logout=1">Logout</a></li>
  </ul>
</li>
<?php } ?>
</ul>
<script type="text/javascript" src="<?php echo "libs/json/json2.js"; ?>"></script>
<script type="text/javascript" src="<?php echo "exts/uis/$path/assets/js/domutils.js"; ?>"></script>
<script type="text/javascript" src="<?php echo "exts/uis/$path/assets/js/popup.js"; ?>"></script>
<script type="text/javascript">
  _mRoot = JSON.parse('<?php echo json_encode($mRoot); ?>');
  function showMore(m_id, elm) {
    var m = null;
    for (var idx in _mRoot.c) {
      var obj = _mRoot.c[idx];
      if (obj.id == m_id) {
        m = obj;
      }
    }
    
    if (m && m.c.length > 0) {
      sub1(m, elm);
    }
  }
    
  function sub1(node, elm) {
    var extn, div, p, pos, elm;
    
    p = new Popup();
    
    pos = DOMUtils.findPos(elm);
    div = document.createElement('div');
    div.style.cursor = 'pointer';
    div.style.width = elm.offsetWidth + 1 + 'px';
    div.style.height = elm.offsetHeight + 'px';
    div.style.position = 'absolute';
    div.style.top = pos[1] + 'px';
    div.style.left = pos[0] - 2 + 'px';
    div.onclick = function() {
      if (node.c.length == 0) {
        location.href = node.link;
      }
    };
    p._bg.appendChild(div);
    
    extn = document.createElement('div');
    extn.className = 'sub_menu';
    extn.style.position = 'absolute';
    extn.style.top = pos[1] + 0 + elm.offsetHeight + 'px';
    extn.style.left = pos[0] - 0 + 'px';
    p._bg.appendChild(extn);
    for (var idx in node.c) {
      var obj = node.c[idx];
      div = document.createElement('div');
      div.className = 'sub_div';
      div.style.minWidth = elm.offsetWidth - 0 + 1 + 'px';
      var table, tr, td;
      table = document.createElement('table');
      table.style.width = '100%';
      tr = table.insertRow(-1);
      td = tr.insertCell(-1);
      td.style.width = '20px';
      var img = document.createElement('img');
      img.src = 'exts/uis/<?php echo $path; ?>/assets/imgs/subpage.png';
      img.style.width = '100%';
      td.appendChild(img);
      td = tr.insertCell(-1);
      td.appendChild(document.createTextNode(obj.name));
      td = tr.insertCell(-1);
      td.style.verticalAlign = 'middle';
      td.style.textAlign = 'right';
      if (obj.c.length > 0) {
        td.appendChild(document.createTextNode('\u232a'));
      }
      div.appendChild(table);
      
      div._node = obj;
      div.onclick = function() {
        location.href = this._node.link;
      };
      extn.appendChild(div);
      
      div._node = obj;
      div._elm = div;
      div.onmouseover = function() {
        if (this._node.c.length > 0) {
          sub2(this._node, this._elm);
        }
      }
    }
    
    p._bg.onmousemove = function(ev) {
      ev = (ev) ? ev : window.event;
      var pos = DOMUtils.findPos(elm);
      if (!((ev.clientX >= pos[0] - 2
          && ev.clientX <= (pos[0] + elm.offsetWidth + 2)
          && ev.clientY >= pos[1]
          && ev.clientY <= (pos[1] + elm.offsetHeight))
          || (ev.clientX >= pos[0] - 2
          && ev.clientX <= (pos[0] + extn.offsetWidth + 2)
          && ev.clientY >= pos[1] + elm.offsetHeight
          && ev.clientY <= (pos[1] + elm.offsetHeight + extn.offsetHeight)))) {
        p._close();
      }
    };
  };
  
  function sub2(node, elm) {
    var extn, div, span, p, pos;
    
    p = new Popup();
    
    pos = DOMUtils.findPos(elm);
    div = document.createElement('div');
    div.className = 'sub_div';
    div.style.backgroundImage = 'url(<?php echo "exts/uis/$path/assets/imgs/bb.png"; ?>)';
    div.style.backgroundRepeat = 'repeat';
    div.style.color = '#fff';
    div.style.width = elm.offsetWidth - 18 + 'px';
    div.style.height = elm.offsetHeight - 10 + 'px';
    div.style.position = 'absolute';
    div.style.top = pos[1] + 'px';
    div.style.left = pos[0] + 'px';
    div.onclick = function() {
      location.href = node.link;
    };
    var table, tr, td;
    table = document.createElement('table');
    table.style.width = '100%';
    tr = table.insertRow(-1);
    td = tr.insertCell(-1);
    td.appendChild(document.createTextNode(node.name));
    td = tr.insertCell(-1);
    td.style.verticalAlign = 'top';
    td.style.textAlign = 'right';
    if (node.c.length > 0) {
      td.appendChild(document.createTextNode('\u232a'));
    }
    div.appendChild(table);
    p._bg.appendChild(div);
    
    extn = document.createElement('div');
    extn.className = 'sub_menu';
    extn.style.position = 'absolute';
    extn.style.top = pos[1] - 1 + 'px';
    extn.style.left = pos[0] + elm.offsetWidth + 2 + 'px';
    p._bg.appendChild(extn);
    for (var idx in node.c) {
      var obj = node.c[idx];
      div = document.createElement('div');
      div.className = 'sub_div';
      div.style.minWidth = elm.offsetWidth - 40 + 'px';
      div.style.height = elm.offsetHeight - 10 + 'px';
      var table, tr, td;
      table = document.createElement('table');
      table.style.width = '100%';
      tr = table.insertRow(-1);
      td = tr.insertCell(-1);
      td.appendChild(document.createTextNode(obj.name));
      td = tr.insertCell(-1);
      td.style.lineHeight = '15px';
      td.style.verticalAlign = 'top';
      td.style.textAlign = 'right';
      if (obj.c.length > 0) {
        td.appendChild(document.createTextNode('\u232a'));
      }
      div.appendChild(table);

      div._node = obj;
      div.onclick = function() {
        location.href = this._node.link;
      };
      extn.appendChild(div);
      
      div._node = obj;
      div._elm = div;
      div.onmouseover = function() {
        if (this._node.c.length > 0) {
          sub2(this._node, this._elm);
        }
      }
    }
    
    p._bg.onmousemove = function(ev) {
      ev = (ev) ? ev : window.event;
      var pos = DOMUtils.findPos(elm);
      if (!((ev.clientX >= pos[0]
          && ev.clientX <= (pos[0] + elm.offsetWidth)
          && ev.clientY >= pos[1]
          && ev.clientY <= (pos[1] + elm.offsetHeight))
          || (ev.clientX >= pos[0] + elm.offsetWidth
          && ev.clientX <= (pos[0] + elm.offsetWidth + extn.offsetWidth)
          && ev.clientY >= pos[1]
          && ev.clientY <= (pos[1] + extn.offsetHeight)))) {
        p._close();
      }
    };
  };
</script>

